import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Radio, DatePicker,Modal } from "antd";
import moment from "moment";
import Content from "../../components/Content";
const { Item } = Form;
const { TextArea } = Input;
const defaultPickerValue = "YYYY-MM-DD HH:mm:ss";
const dateFormat = "YYYY-MM-DD HH:mm:ss";
class AcquisitionInForm extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    Acq_id: '',
    acqType: 'ty',
    gatheringTime: moment(new Date(), defaultPickerValue).format(dateFormat), 
    storeTime: moment(new Date(), defaultPickerValue).format(dateFormat), 
    visible:false
  };
  hideModal = () => {
    this.setState({
      visible: false,
    });
  };


  loadData = (type = 1) => {
    let acqType = this.state.acqType;
    let id = document.getElementById('Ren_id') != null ?  document.getElementById('Ren_id').value : '';

    if( !id ) {
      return;
    }

    let url = global.api.acquisitionPlant;

    switch (acqType) {
      case 1: // tu
        url = global.api.acquisitionSoil;
        break;
      case 2: // shui
        url = global.api.acquisitionWater;
        break;       
      case 3: // kuang
        url = global.api.acquisitionOer;
        break;
      case 4: // zhiwu
        url = global.api.acquisitionPlant;
        break; 
      case 5: // dongwu
        url = global.api.acquisitionAnimal;
        break;   
      case 6: // qita
        url = global.api.acquisitionOther;
        break;   
      case 7: // qitalaiyuan
        url = global.api.acquisitionOther;
        break;             
      default:
        break;
    }

    // 获取数据
    global.getdata.get(url + id + '/')
    .then(res => {

      this.setState({gatheringTime: res.q_time, Acq_id: res.Acq_id});      

      document.getElementById('country').value = res.in_country;
      document.getElementById('gathering_area').value = res.r_cjdq;
      document.getElementById('gathering_site').value = res.r_cjdd;
      document.getElementById('longitude').value = res.add_longitude;
      document.getElementById('latitude').value = res.add_latitude;
      document.getElementById('altitude').value = res.add_height;
      document.getElementById('climate_feature').value = res.in_climate;
      document.getElementById('weather').value = res.in_weather;
      document.getElementById('gathering_person').value = res.q_person;
      document.getElementById('gathering_units').value = res.in_affiliation;

    })
    .catch(err => {
      
    }) 
  }

  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      acqType: e.target.value
    });

    // 加载数据
    this.loadData(e.target.value);

  };

  onConfirm = () => {
    Modal.confirm({
      title: '是否确认出库',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {

        let id = document.getElementById('Ren_id').value;
        let Acq_id = this.state.Acq_id;
        let i_person = document.getElementById('q_person').value;
        let worker = document.getElementById('q_person').value;
        let i_ffsh = document.getElementById('q_person').value;
        let remark = document.getElementById('remark').value;
        let in_number = document.getElementById('store_num').value;
        let store_place = document.getElementById('store_place').value;
        let in_time = this.state.storeTime;

        const url = global.api.acquisitionOut;
        return global.network.post(url, {
          'id': id, 
          'Acq_id': Acq_id, 
          'i_person': i_person, 
          'worker': worker, 
          'i_ffsh': i_ffsh, 
          'remark': remark, 
          'out_number': in_number,
          'store_place': store_place,
          'in_time': in_time,
          
          'Acq_type': this.state.acqType,
          'r_cjdd': document.getElementById('gathering_site').value,
          'add_longitude': document.getElementById('longitude').value,
          'add_latitude': document.getElementById('latitude').value,
          'add_height': document.getElementById('altitude').value,
          'q_person': document.getElementById('gathering_person').value
        })
        .then(res => {
          Modal.success({
            content: '出库成功!',
          });
        })
        .catch(err => {
          
        }) 
    

      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="任务编号">
          <Input id="Ren_id" onChange={() => this.loadData()} />
        </Item>
        <Item label="采集样品编号">
          <Input id="Acq_id" onChange={e => this.setState({Acq_id : e.target.value}) } value={this.state.Acq_id} />
        </Item>
        <Item label="采集样品类型">
          <Radio.Group
            onChange={this.onChange}
            defaultValue={this.state.acqType}
            className="radio"
          >
            <Radio value={'ty'}>土样</Radio>
            <Radio value={'sy'}>水样</Radio>
            <Radio value={'kw'}>矿石</Radio>
            <Radio value={'zw'}>植物</Radio>
            <Radio value={'dw'}>动物</Radio>
            <Radio value={'qt'}>其他类型样品</Radio>
            <Radio value={'qt'}>其他来源</Radio>
          </Radio.Group>
        </Item>
        <Item label="原产国">
          <Input id="country" />
        </Item>
        <Item label="采集地区（行政区）">
          <Input id="gathering_area" />
        </Item>
        <Item label="采集地点">
          <Input id="gathering_site" />
        </Item>
        <Item label="经度">
          <Input id="longitude" />
        </Item>
        <Item label="纬度">
          <Input id="latitude" />
        </Item>
        <Item label="海拔高度（m）">
          <Input id="altitude" />
        </Item>
        <Item label="气候特征">
          <Input id="climate_feature" />
        </Item>
        <Item label="天气状况">
          <Input id="weather" />
        </Item>
        <Item label="出库时间">
          <DatePicker onChange={(a,b) => this.setState({gatheringTime: b})} format={dateFormat} defaultValue={moment(this.state.gatheringTime, defaultPickerValue)} />
        </Item>
        <Item label="取样人员">
          <Input id="gathering_person" />
        </Item>
        <Item label="取样单位">
          <Input id="gathering_units" />
        </Item>
        <hr style={{height:20,border:'none',background:'#F0F2F5'}}/>
        <Item label="存放位置">
          <Input id="store_place" />
        </Item>
        <Item label="存放数量">
          <Input id="store_num" />
        </Item>
        <Item label="存放日期">
          <DatePicker onChange={(a,b) => this.setState({storeTime: b})} format={dateFormat} />
        </Item>
        <Item label="备注说明">
          <TextArea id="remark" autoSize={{ minRows: 2, maxRows: 6 }} />
        </Item>
        <Item label="入库人员">
          <Input id="q_person" />
        </Item>
        <Item wrapperCol={{ span: 12, offset: 3 }}>
          <Row guuter={16}>
            <Col span={6}>
              <Button onClick={this.onConfirm} type="primary">
                保存
              </Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}

const WrapperedAcquisitionInForm = Form.create({
  name: "add acquisition"
})(AcquisitionInForm);

class AcquisitionIn extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedAcquisitionInForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default AcquisitionIn;
